import {
  getProductTotalInfoByPage,
  addProductTotalInfo,
  updateProductTotalInfo,
  delProductTotalInfo,
  exportProductTotalInfo,
  getProduceType,
} from '@/services/project/productTotalInfo';
import { PlusOutlined, LeftOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree, Select } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { history } from 'umi';
const ProductTotalInfo: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const [allTypeOptions, setAlltypeOptions] = useState([]);
  const [infoId, setInfoId] = useState('');
  const ref = useRef(null);
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    {
      title: '标准柜体',
      dataIndex: 'isStandard',
    },

    {
      title: '柜体数量',
      dataIndex: 'productQty',
    },
    {
      title: '柜体类型',
      dataIndex: 'productType',
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
    },
    {
      title: '非标柜体名称',
      dataIndex: 'unstandardName',
    },

    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
    },
    {
      title: '备注',
      dataIndex: 'memo',
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(true);
            setFormTitle('编辑');
            form.setFieldsValue({
              infoId: record.infoId,
              isPublished: record.isPublished,
              isStandard: record.isStandard,
              memo: record.memo,
              productQty: record.productQty,
              productType: record.productType,
              projectName: record.projectName,
              unstandardName: record.unstandardName,
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delProductTotalInfo({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  const handleSubmit = async () => {
    setConfirmLoading(true);
    if (formTitle == '新建') {
      const params = { ...form.getFieldsValue(), infoId: infoId };
      const result = await addProductTotalInfo(params);
      if (result != null) {
        message.success('添加成功');
      }
    } else {
      const params = { ...form.getFieldsValue(), infoId: infoId };
      const result = await updateProductTotalInfo(params);
      if (result != null) {
        message.success('修改成功');
      }
    }
    setConfirmLoading(false);
    setModalVisit(false);
    actionRef.current.reload();
  };

  //获取所有柜体类型
  const allProductType = async () => {
    const res = await getProduceType(null);
    const temp: any = [];
    res.data.map((item: any) => {
      temp.push({ value: item, label: item });
    });
    setAlltypeOptions(temp);
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="柜体信息查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<LeftOutlined />}
            onClick={() => {
              history.push({ pathname: '/project/info' });
            }}
            type="primary"
          >
            返回
          </Button>,
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateOrUpdate(false);
              setFormTitle('新建');
              form.resetFields();
              setModalVisit(true);
            }}
            type="primary"
          >
            新建
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTran(params);
          const result = await getProductTotalInfoByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          allProductType();
          setInfoId(history.location.state.id);
          const content = result.data.content;
          content.map((item: any) => {
            if (item.isStandard == 1) {
              item.isStandard = '是';
            } else {
              item.isStandard = '否';
            }
          });
          return {
            data: content, //result.data.content
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
      />
      <Modal
        title={formTitle}
        visible={modalVisit}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => setModalVisit(false)}
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="left"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item label="id" name="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item
            label="标准柜体"
            name="isStandard"
            rules={[{ required: true, message: 'Please input your isStandard!' }]}
          >
            <Select
              placeholder="是否为标准柜体"
              onChange={(value) => {}}
              options={[
                { value: '1', label: '是' },
                { value: '0', label: '否' },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="柜体数量"
            name="productQty"
            rules={[{ required: true, message: 'Please input your productQty!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="柜体类型"
            name="productType"
            rules={[{ required: true, message: 'Please input your productType!' }]}
          >
            <Select
              placeholder="请选择柜体类型"
              onChange={(value) => {}}
              disabled={createOrUpdate}
              options={allTypeOptions}
            />
          </Form.Item>
          <Form.Item
            label="项目id"
            name="infoId"
            hidden={true}
            //rules={[{ required: true, message: 'Please input your infoId!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
            label="备注"
            name="memo"
            //rules={[{ required: true, message: 'Please input your memo!' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};
export default ProductTotalInfo;
